<!--创建时间：2022/3/14 11:07 描述：input输入框显示重新加载 -->
<template>
  <view>
    <input
        :class="inputClass"
        :type="inputType"
        :placeholder="placeholder"
        key="input1"
        v-if="showAgain"
        :disabled="disabled"
        :value="inputValue"
        :cursor="inputValueLength"
        @blur="inputBlur"
        @input="inputInput"
        @focus="inputFocus"
    />
    <input
        :class="inputClass"
        :type="inputType"
        :placeholder="placeholder"
        key="input2"
        v-if="!showAgain"
        :disabled="disabled"
        :value="inputValue"
        :cursor="inputValueLength"
        @blur="inputBlur"
        @input="inputInput"
        @focus="inputFocus"
    />
  </view>
</template>

<script>
import NumberUtils from "@/utils/NumberUtils";
import {setValueFromVm} from "@/utils";

export default {
  name: "CommonInputComLoadAgain",
  // 定义用到的组件
  components: {},
  // 自定义指令，这里定义局部指令
  directives: {},
  // 过滤器
  filters: {},
  // 定义用到的混入，可以重复使用代码
  mixins:[],
  model: {
    prop: 'value',
    event: 'inputModel'
  },
  // 属性定义使用对象的形式进行定义
  props: {
    disabled: {
      default: false,
      type: Boolean,
    },
    showLoadAgain: {
      default: Number.MIN_VALUE
    },
    type: {
      default: 'text',
      type: String,
      validator: (val) => {
        return ['text', 'digit', 'intNumber', 'password'].includes(val)
      }
    },
    inputClass: {
      default: 'common-input-class',
      type: String,
    },
    placeholder: {
      default: '请输入',
      type: String,
    },
    value: {
      default: '',
      type: [String, Number]
    },
    min: {
      default: Number.MIN_SAFE_INTEGER,
      type: [Number]
    },
    max: {
      default: Number.MAX_SAFE_INTEGER,
      type: [Number]
    },
  },
  // 定义变量
  data() {
    return {
      showAgain: true,
      eventValue: null,
    }
  },
  // 定义计算属性值，加上watch配合，可以读取vuex异步获取的值
  computed: {
    // inputComLoadAgainProps(){
    //   return this.test;
    // },
    inputType() {
      if(['digit','intNumber'].includes(this.type)) {
        return 'digit'
      } else {
        return this.type
      }
    },
    inputValueLength() {
      return this.inputValue?.length || 0
    },
    inputValue: {
      get() {
        return this.value
      },
      set(val) {
        if (this.type === 'digit') {
          val = NumberUtils.toStringFloat(val)
          val = NumberUtils.numLimitMinAndMax(val, this.min, this.max)
        } else if (this.type === 'intNumber') {
          val = NumberUtils.toStringInt(val)
          val = NumberUtils.numLimitMinAndMax(val, this.min, this.max)
        }
        setValueFromVm(this, val, 'eventValue.detail.value')
        this.$emit('blur', this.eventValue)
        this.$emit('inputModel', val)
        this.showAgainFunc()
      }
    }
  },
  // 监听属性值的变化
  watch:{
    showLoadAgain() {
      this.showAgainFunc()
    },
    // inputComLoadAgainProps2: {
    //   handler(value, oldValue) {
    //
    //   },
    //   immediate: true,
    //   deep: true
    // }
  },
  // 生命周期钩子函数begin
  // 在页面节点挂载完执行
  mounted() {
  },
  // 在页面创建完执行
  created() {
  },
  // 生命周期钩子函数end
  // 定义方法
  methods: {
    showAgainFunc() {
      this.showAgain = !this.showAgain
    },
    inputFocus(e) {
      this.$emit('focus', e)
    },
    inputBlur(e) {
      this.eventValue = e
      this.inputValue = e.detail.value
    },
    inputInput(e) {
      this.$emit('input', e)
    }
  },
}
</script>

<style scoped lang="scss">
.common-input-class {
  width: 300rpx;
  text-align: right;
  height: 46px;
  line-height: 46px;
  font-size: 13px;
  font-weight: 400;
  color: #333333;
}
</style>
